<template>
    <div class="menu-left" :style="{width: togWidth}">
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%;">
            <el-menu
                    :default-active="activeMenu"
                    :collapse="$store.state.isCollapse"
                    :unique-opened="false"
                    :collapse-transition="false"
                    mode="vertical"
                    router>
                <template v-for="menu in menuList">
                    <el-menu-item :index="menu.link">
                        <i :class="menu.pictureUrl"></i>
                        <span slot="title">{{ menu.name }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
    export default {
        name: "Menu",
        data() {
            return {
                menuList: [{
                    id: 1,
                    name: '运行环境管理',
                    pictureUrl: 'el-icon-s-platform',
                    link: '/env/list'
                }, {
                    id: 2,
                    name: '数据集管理',
                    pictureUrl: 'el-icon-document',
                    link: '/dataset/list'
                }, {
                    id: 3,
                    name: '语音识别',
                    pictureUrl: 'el-icon-microphone',
                    link: '/recognition'
                }]
            }
        },
        computed: {
            activeMenu() {
                let activeMenu = this.$route.meta && this.$route.meta.activeMenu;
                return activeMenu ? activeMenu : this.$route.path;
            },
            togWidth() {
                let isCollapse = this.$store.state.isCollapse;
                return isCollapse ? '60px' : '200px';
            }
        },
        methods: {}
    }
</script>
<style scoped>
    .header-nav-submenu .el-menu-item-group__title {
        display: none;
    }
</style>